﻿@using BookMarks.Web.Options
@using Microsoft.Extensions.Options
@using RuoVea.ExDto
@inject IOptionsMonitor<SystemInfo> systemInfo;
@inject ICurrentUser _currentUser
@{
    bool isAdmin = User?.Claims.Any(c => c.Type == ClaimConst.CLAINM_ISADMIN && c.Value == "true") ?? false;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@systemInfo.CurrentValue.Title</title>
    <link href="~/elementui/index.min.css?v=1" rel="stylesheet" asp-append-version="true" />
    <style type="text/css"> .el-menu-item i,.el-submenu i { color: @systemInfo.CurrentValue.SkinColor } .el-menu--horizontal > .el-menu-item.is-active {color: @systemInfo.CurrentValue.SkinColor !important;} </style>
 
        <style >
        :root {
            --primary-color: #409EFF;
            --success-color: #67C23A;
            --warning-color: #E6A23C;
            --danger-color: #F56C6C;
            --info-color: #909399;
            --bg-color: #f5f7fa;
            --sidebar-width: 200px;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
            background-color: var(--bg-color);
            color: #333;
        }

        #app {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .el-header {
            background: linear-gradient(135deg, #1e5799 0%, #207cca 100%);
            color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 10;
        }

        .header-container {
            display: flex;
            align-items: center;
            height: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .logo {
            display: flex;
            align-items: center;
            margin-right: 30px;
        }

            .logo img {
                height: 36px;
                margin-right: 10px;
            }

            .logo h1 {
                margin: 0;
                font-size: 18px;
                font-weight: 500;
            }

        .el-menu--horizontal {
            background: transparent;
            border-bottom: none;
        }

            .el-menu--horizontal > .el-menu-item,
            .el-menu--horizontal > .el-submenu .el-submenu__title {
                color: rgba(255, 255, 255, 0.8);
                height: 60px;
                line-height: 60px;
            }

                .el-menu--horizontal > .el-menu-item:hover,
                .el-menu--horizontal > .el-submenu:hover .el-submenu__title {
                    color: white;
                    background-color: rgba(255, 255, 255, 0.1);
                }

                .el-menu--horizontal > .el-menu-item.is-active {
                    color: white;
                    border-bottom: 3px solid white;
                }

        .user-info {
            margin-left: auto;
            display: flex;
            align-items: center;
        }

        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            margin-right: 10px;
            border: 2px solid rgba(255, 255, 255, 0.5);
        }

        .username {
            color: white;
            margin-right: 15px;
            font-size: 14px;
        }

        .main-container {
            display: flex;
            flex: 1;
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
        }

        .sidebar {
            width: var(--sidebar-width);
            background: white;
            border-radius: 4px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
            margin-right: 20px;
            padding: 10px 0;
        }

        .content {
            flex: 1;
            background: white;
            border-radius: 4px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
            padding: 20px;
        }

        iframe {
            width: 100%;
            min-height: calc(100vh - 100px);
            border: none;
            border-radius: 4px;
        }

        .el-dialog {
            border-radius: 8px;
        }

        .el-dialog__header {
            border-bottom: 1px solid #eee;
            padding: 15px 20px;
        }

        .el-dialog__title {
            font-size: 16px;
            font-weight: 500;
        }

        .el-dialog__body {
            padding: 20px;
        }

        .el-form-item__label {
            color: #666;
        }

        .form-footer {
            margin-top: 20px;
            text-align: right;
        }

        .el-button--mini {
            padding: 7px 15px;
        }

        .profile-dialog .el-form-item {
            margin-bottom: 15px;
        }

        .profile-dialog span {
            color: #333;
        }

        @@media (max-width: 768px) {
            .main-container

        {
            flex-direction: column;
            padding: 10px;
        }

        .sidebar {
            width: 100%;
            margin-right: 0;
            margin-bottom: 15px;
        }

        .header-container {
            padding: 0 10px;
        }

        .logo h1 {
            display: none;
        }

        }

        .el-menu.el-menu--horizontal {
            border-bottom: none !important;
        }

        .el-menu--horizontal > .el-menu-item.is-active {
            border-bottom: 0px solid white !important;
        }
    </style>
 
</head>
<body>
    <div id="app" v-cloak>
        <el-extend-header class="elmy" logo_url="/img/logo.png" title="@systemInfo.CurrentValue.Title" :menu-data="menuData" :active-index="activeIndex" :user="user" :select="handleSelect" :menu-items="dropList"></el-extend-header>
        <el-main><iframe ref="iframe" :src="activeIndex" style="width:100%;"></iframe></el-main>
        <el-dialog :title="i18n.t('myProfile')" :visible.sync="profileDialogVisible" width="400px" class="profile-dialog">
            <el-form :model="userForm" label-width="100px" class="view-only">
                <el-form-item :label="i18n.t('username')"><span>{{ userForm.account }}</span></el-form-item>
                <el-form-item :label="i18n.t('fullName')"><span>{{ userForm.realName }}</span></el-form-item>
                <el-form-item :label="i18n.t('email')"><span>{{ userForm.email }}</span></el-form-item>
                <el-form-item :label="i18n.t('phone')"><span>{{ userForm.phone }}</span></el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog :title="i18n.t('changePassword')" :visible.sync="passwordDialogVisible" width="500px" class="password-dialog">
            <el-form :model="passwordForm" :rules="passwordRules" ref="passwordForm" label-width="100px">
                <el-form-item :label="i18n.t('currentPassword')" prop="currentPassword">
                    <el-input v-model="passwordForm.currentPassword" type="password" :placeholder="i18n.t('enterCurrentPassword')" size="mini"></el-input>
                </el-form-item>
                <el-form-item :label="i18n.t('newPassword')" prop="newPassword">
                    <el-input v-model="passwordForm.newPassword" type="password" :placeholder="i18n.t('enterNewPassword')" size="mini"></el-input>
                </el-form-item>
                <el-form-item :label="i18n.t('confirmPassword')" prop="confirmPassword">
                    <el-input v-model="passwordForm.confirmPassword" type="password" :placeholder="i18n.t('reEnterNewPassword')" size="mini"></el-input>
                </el-form-item>
            </el-form>
            <div class="form-footer" style="text-align: right;">
                <el-button @@click="passwordDialogVisible = false" size="mini">{{i18n.t('cancel')}}</el-button>
                <el-button type="primary" @@click="changePassword" :loading="passwordLoading" size="mini">{{i18n.t('confirmChange')}}</el-button>
            </div>
        </el-dialog>
    </div>
    <script src="~/vue/vue.js"></script>
    <script src="~/elementui/index.i18n.js"></script>
    <script src="~/elementui/index.lang.js"></script>
    <script src="~/elementui/index.min.js"></script>
    <script src="~/elementui/lang/zhCN.js"></script>
    <script src="~/elementui/lang/en.js"></script>
    <script src="~/elementui/lang/fr.js"></script>
    <script src="~/elementui/lang/ja.js"></script>
    <script src="~/elementui/lang/vi.js"></script>
    <script src="~/elementui/lang/zhTW.js"></script>
    <script>Vue.prototype.$baseURL = "";</script>
    <script src="~/vue/axios.min.min.js"></script>
    <script src="~/vue/vue-i18n.min.js"></script>
    <script src="~/avue/avue.min.js"></script>
    <script src="~/avue/avue.min.option.js"></script>
    <script src="~/lang/locale/enUS.js"></script>
    <script src="~/lang/locale/frFR.js"></script>
    <script src="~/lang/locale/jaJP.js"></script>
    <script src="~/lang/locale/viVN.js"></script>
    <script src="~/lang/locale/zhCN.js"></script>
    <script src="~/lang/locale/zhTW.js"></script>
    <script src="~/lang/index.min.js"></script>

    <script src="~/js/menu.js"></script>
    <script>
        var $taskVue = new Vue({
            el: "#app",
            data() {
                var validatePass = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error(`${Vue.prototype.i18n.t('reEnterPassword')}`));
                    } else if (value !== this.passwordForm.newPassword) {
                        callback(new Error(`${Vue.prototype.i18n.t('passwordNotMatch')}`));
                    } else {
                        callback();
                    }
                };
                return {
                    isAdmin: @(isAdmin.ToString().ToLower()),
                    menuData: [],
                    defultIndex: "",
                    activeIndex: "",
                    user : { username: '@_currentUser.Name',avatar: '/img/logo.png' },

                    profileDialogVisible: false,
                    passwordDialogVisible: false,
                    passwordLoading: false,
                    userForm: {
                        account: '',
                        realName: '',
                        email: '',
                        phone: '',
                    },
                    passwordForm: {
                        currentPassword: '',
                        newPassword: '',
                        confirmPassword: ''
                    },
                    passwordRules: {
                        currentPassword: [
                            { required: true, message: `${Vue.prototype.i18n.t('enterCurrentPassword')}`, trigger: 'blur' }
                        ],
                        newPassword: [
                            { required: true, message:`${Vue.prototype.i18n.t('enterNewPassword')}`, trigger: 'blur' },
                            { min: 6, message: `${Vue.prototype.i18n.t('passwordMinLength')}`, trigger: 'blur' }
                        ],
                        confirmPassword: [
                            { required: true, validator: validatePass,   trigger: 'blur' }
                        ]
                    },
                    dropList:[
                        { title: `${Vue.prototype.i18n.t('myProfile')}`, click: () => { this.showProfileDialog(); } },
                        { title: `${Vue.prototype.i18n.t('changePassword')}`, click: () => { this.showPasswordDialog(); } },
                        { title:  `${Vue.prototype.i18n.t('logout')}`, click: () => { this.logout(); } }
                          ],
                }
            },
            created() {
                if (this.isAdmin) {
                    this.menuData = menuDataAdmin;
                    this.defultIndex = "/user/index";
                    this.activeIndex =this.defultIndex;
                }
                else {
                     this.menuData = menuDataNone;
                    this.defultIndex = "/Bookmark";
                    this.activeIndex =this.defultIndex;
                }
            },
            methods: {
                showProfileDialog() {
                    this.$http.get("/user/baseinfo").then((res) => {
                        this.userForm = res;
                        this.profileDialogVisible = true;
                    });
                },
                showPasswordDialog() {
                    this.passwordDialogVisible = true;
                    if (this.$refs.passwordForm) {
                        this.$refs.passwordForm.resetFields();
                    }
                },
                changePassword() {
                    this.$refs.passwordForm.validate((valid) => {
                        if (valid) {
                            this.passwordLoading = true;
                            var data={passwordOld:this.passwordForm.currentPassword,passwordNew:this.passwordForm.newPassword,}
                            this.$http.post("/user/changepwd",data).then((res) => {
                                 this.passwordLoading = false;
                                if(res){
                                    this.$message({message:`${Vue.prototype.i18n.t('passwordChangeSuccess')}`,type: 'success'});
                                    this.userForm = res;
                                    this.passwordDialogVisible = false;
                                }else{
                                    this.$message({message: res.message,type: 'error'});
                                }
                            })
                        } else {
                            return false;
                        }
                    });
                },
                adjustIframeHeight() {
                    const iframe = this.$refs.iframe;
                    if (iframe) {
                        const newHeight = window.innerHeight - 125;
                        iframe.style.minHeight = `${newHeight}px`;
                        iframe.style.border = 'none';
                    }
                },
                handleSelect(key, keyPath) {
                    if (key) {
                            if (key === "/") {
                                window.location.href = "/"; 
                            } else {
                                this.activeIndex = key;  
                            }
                        } 
                        else {
                            this.activeIndex = this.defultIndex; // 回退到默认路由
                        }
                },
                logout() {
                    console.log('Logging out...');
                    window.location.href = "/auth/logout";
                },
            },
            mounted() {
                this.adjustIframeHeight();
                window.addEventListener('resize', this.adjustIframeHeight);
            },
            beforeDestroy() {
                window.removeEventListener('resize', this.adjustIframeHeight);
            },
        });
    </script>
</body>
</html>
